<template>
    <transition name="koi-toast-pop">
        <div class="koi-toast" v-show="visible" :class="customClass">
            <div class="koi-toast-icon" v-show="iconClass !== ''">
                <span :class="iconClass"></span>
            </div>
            <span class="koi-toast-text" v-html="message"></span>
        </div>
    </transition>
</template>

<style lang="less">
.koi-toast {
    position: fixed;
    max-width: 80%;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    box-sizing: border-box;
    text-align: center;
    z-index: 11000;
    transition: opacity .3s linear;
    padding: 0 20px 10px 20px;
    &-icon {
        padding-top: 10px;
    }
    &-text {
        padding-top: 10px;
        font-size: 14px;
        display: block;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    } // 显示在头部
    &.is-top {
        top: 50px;
        left: 50%;
        transform: translate(-50%, 0);
    } // 居中显示
    &.is-middle {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    } // 底部显示
    &.is-bottom {
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, 0);
    } // vue 动画 class样式
    &-pop-enter,
    &-pop-leave-active {
        opacity: .1;
    }
}
</style>

<script>
export default {
    props: {
        // toast 消息
        message: String,
        // toast 位置 bottom 、middle、 top
        position: {
            type: String,
            default: 'bottom'
        },
        // toast 增加一个显示icon的地方
        iconClass: {
            type: String,
            default: ''
        }
    },

    methods: {
        // 关不toast
        close: function() {
            this.visible = false;
            this.$emit('close');
        }
    },

    data() {
        return {
            // 显示 隐藏 toast
            visible: false
        }
    },

    computed: {
        customClass() {
            return 'is-' + this.position
        }
    }
}
</script>